<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box" style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="flx-row-bw-s">
          <div>
            <div class="big-image image"></div>
            <div class="flx-row-bw-c img-list-area">
              <div class="button left"></div>
              <div class="flx-row-s-c middle-area">
                <div class="image-item image"></div>
                <div class="image-item image"></div>
                <div class="image-item image"></div>
                <div class="image-item image"></div>
              </div>
              <div class="button"></div>
            </div>
          </div>
          <div class="right-area">
            <h2 class="c-d2 f-18 f-w-600">欧洲站双肩背包真皮男士背包欧洲站双肩背包真皮男士背包</h2>
            <p class="f-16 c-g" style="margin-top: 30px; margin-bottom:25px;">积分：<span class="c-p">3000积分</span></p>
            <p class="f-16 c-g">库存：<span class="c-d2">3000</span></p>
            <div class="f-16 c-g flx-row-s-s" style="margin-top: 25px; margin-bottom:45px;">
              数量：
              <div class="number-buttom">-</div>
              <div class="number-box">1</div>
              <div class="number-buttom">+</div>
            </div>
            <p class="f-16 c-g">我的积分：<span class="c-d2">3000</span><a class="b-form-font-button" style="font-size: 16px;margin-left:20px" href="">积分明细</a></p>
            <div
            class="big-button-size-40 user-strong-button"
              style="width: 125px; margin-top:40px;"
            >
              兑换
            </div>
          </div>
        </div>
        <div class="box-title f-18 c-d2 detail-title">商标详情</div>
        <div class="detail-area"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      breadCrumb: [
        { name: "积分商城", to: "/pointsmall" },
        { name: "商品详情", to: "/pmdetail" },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    background-color: #fff;
    border: 1px solid #eaeaea;
    padding: 30px 40px 50px;
    margin-bottom: 15px;
  }

  .image {
    @include bg-setting(null, cover, center);
    background-color: #ededed;
    border-style: solid;
    border-width: 1px;
    flex-shrink: 0;
  }
  .big-image {
    @include size(386px);
    margin-bottom: 14px;
    border-color: #ededed;
  }
  .img-list-area {
    width: 386px;

    .middle-area {
      width: 320px;
      flex-wrap: nowrap;

      .image-item {
        @include size(66px);
        border-color: transparent;
        transition: border-color 0.3s;
        margin: 0 7px;
        cursor: pointer;

        &:hover,
        .active {
          border-color: #ff5100;
        }
      }
    }

    .button {
      @include size(21px, 66px);
      @include bg-setting("list-b-normal", contain, center);
      transition: background-image 0.3s;
      cursor: pointer;
      &:hover {
        background-image: url("~@/assets/images/list-b-active@2x.png");
      }

      &.left {
        transform: rotate(180deg);
      }
    }
  }
  .right-area {
    width: 610px;

      .number-buttom {
        @include size(30px, 36px);
        line-height: 34px;
        border-width: 1px;
        border-style: solid;
        color: #1B1B1B;
        border-color: #B5B5B5;
        transition: color .3s, border-color .3s;
        border-radius: 4px;
        cursor: pointer;
        text-align: center;
        &:hover {
          color: #FF5100;
          border-color: #FF5100;
        }
      }
      .number-box {
        border-radius: 4px;
        min-width: 48px;
        padding: 0 15px;
        line-height: 34px;
        height: 36px;
        border: #FF5100 solid 1px;
        text-align: center;
        margin: 0 10px;

      }
  }
  .box-title {
      line-height: 45px;
      border-bottom: 2px solid #F9521F;
    }
    .detail-title {
      width: fit-content;
      margin: 40px auto 15px;
    }
    .detail-area {
      padding: 30px 0 50px;
    }
}
</style>